<template>
  <el-dialog title="编辑"
             v-model="visible"
             @close="close"
             :close-on-click-modal="false"
             width="800px"
             class="form">
    <el-alert type="warning" :closable="false">
      通用=2000、苹果=2001、华为=2002、OPPO=2003、VIVO=2004、三星=2005、小米=2006、一加=2015 <br>
      膜=M，壳=K，维修=W <br>
      非原装屏=998、原装屏=999、电镀增透=924 <br>
      全屏高=002、黄钻UV高=163 <br>
      电镀高=173、原屏高=168、钻石高=185 <br>
      电镀防=181、原屏防=175、钻石防=187 <br>
      电镀磨=182、原屏磨=174、钻石磨=186 <br>
    </el-alert>
    <el-form :model="formData" ref="formRef" style="margin-top: 10px" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="配件分类" prop="pfId">
            <el-select v-model="formData.pfId" placeholder="选择分类"
                       filterable clearable>
              <el-option v-for="item in cateList"
                         :key="item.pfId"
                         :label="item.pfName"
                         :value="item.pfId"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="formData.status"
                       placeholder="使用状态">
              <el-option v-for="item in Dic.partsStatus()"
                         :key="item.value"
                         :label="item.text"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="配件名称" prop="pname">
            <el-input v-model="formData.pname" placeholder="请输入名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配件串号" prop="serialnumber">
            <el-input v-model="formData.serialnumber" placeholder="请输入串号"/>
          </el-form-item>
          <el-form-item label="零售价" prop="lsPrice">
            <el-input v-model="formData.lsPrice" placeholder="请输入零售价"/>
          </el-form-item>
          <el-form-item label="会员价" prop="hyPrice">
            <el-input v-model="formData.hyPrice" placeholder="请输入会员价"/>
          </el-form-item>
          <el-form-item label="批发价" prop="pfPrice">
            <el-input v-model="formData.pfPrice" placeholder="请输入批发价"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备货数量" prop="count">
            <el-input v-model.number="formData.count" placeholder="请输入备货数量"/>
          </el-form-item>

          <el-form-item label="备注" prop="conuent">
            <el-input type="textarea" v-model="formData.conuent" placeholder="请输入备注"/>
          </el-form-item>
          <el-form-item label="修改说明" prop="conuent1">
            <el-input type="textarea" v-model="formData.conuent1" placeholder="请输入修改说明"/>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <el-button @click="saveOrUpdate" type="success">提交</el-button>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import Dic from "@/utils/dic"
import partsApi from "@/api/parts";
import type {FormInstance} from 'element-plus'
import {ref} from "vue";

export default {
  name: "categoryListDetail",
  props: {
    modelValue: {},
    info: {},
    cateList: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  setup() {
    const formRef = ref<FormInstance>();
    return {formRef}
  },
  data() {
    return {
      Dic,
      visible: false,
      formData: {
        pname: "",
        pfId: "",
        serialnumber: "",
        lsPrice: "",
        hyPrice: "",
        pfPrice: "",
        count: "",
        status: "",
        conuent: "",
        conuent1: "",
        shopId: window.localStorage.getItem("currentShop")
      },
    };
  },
  watch: {
    modelValue(value) {
      this.visible = value
      if (this.info.paId) {
        this.$nextTick(() => {
          this.formData = {...this.info};
        })
      }
      if (this.formRef) {
        this.formRef.resetFields()
      }
    },
  },
  created() {
  },
  methods: {
    saveOrUpdate() {
      partsApi.partsSave(this.formData).then(res => {
        if (res.flag) {
          this.close();
          this.refresh();
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>